<script setup>
import store from '../store'
store.getPosts()
</script>

<script>
export default {
    emits: ['to-search'],
    data() {
        return {
            posts: store.state.Posts,
            select: [],
            text: "",
            re: {},
        }
    },
    watch: {
        text(newText, oldText) {
            this.re = new RegExp(newText, "gi")
        }
    },
    methods: {
        toSearch() {
            while (this.select.length > 0) {
                this.select.pop()
            }
            for (let index = 0; index < store.state.Posts.length; index++) {
                if (store.state.Posts[index].theme.match(this.re) != null) {
                    this.select.push(store.state.Posts[index].id)
                }
            }
            if (this.select.length === 0 && this.text.length != 0) this.select.push("NotFound")
            this.$emit('to-search', this.select)
        }
    }
}
</script>
<template>
    <div class="input-group mb-3">
        <input class="form-control" v-model="text" placeholder="请输入关键字" aria-describedby="button-addon" />
        <button @click="toSearch()" class="btn btn-outline-secondary" type="button" id="button-addon">{{ 搜索 }}<svg
                class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo" />
            </svg></button>
    </div>
</template>

<style scoped>
.icon{
    font-size: 18px !important;
    width: 18px;
    height: 18px;
}
</style>